<template>
	<view>
		<u-navbar :is-back="false" :border-bottom="false">
			<view style="padding-left: 12px;width: 64%;"><u-search v-model="searchQuery" shape="round" :clearabled="true" :show-action="false" :animation="true"></u-search></view>
			<view  class="slot-wrap p15 f32" style="text-align: right;width: 34%;">
				
					<!--<view  style="position: relative;top:-2px;right: -3px;">
						
						<u-search v-model="searchQuery" shape="round" :clearabled="true" :show-action="false" :animation="true"></u-search>
					</view>-->
					<view @click="confirmSelect" class="" style="display: inline-block;">
					   <text>{{selectedCity ? selectedCity.name : '全国'}}</text>
						<u-icon name="arrow-right" color="#666666" size="40"></u-icon>
					</view>
				
			</view>
		</u-navbar>
	  <view class="container">
		<view class="content">
		  <scroll-view 
			class="city-list" 
			scroll-y 
			:scroll-into-view="scrollIntoId"
			scroll-with-animation
			@scroll="onScroll"
		  >
		  <view v-if="!isDrift" class="city-group">
		    <view class="city-item bbo" @click="selectCity('')">
				<view class="disfr-lr" style="width: 100%;">
					<text class="name">全国</text>
					<u-icon v-if="!selectedCity.name || selectedCity.name == '全国'" name="duihao" custom-prefix="qxl-icon" style="position: relative;right:40rpx" size="40"></u-icon>
				</view>
		    </view>
		  </view>
		  
			<view 
			  v-for="(group, letter) in filteredCityData" 
			  :key="letter" 
			  class="city-group" 
			  :id="`group-${letter}`"
			>
			  <!--<text class="group-title">{{ letter }}</text>-->
			  <view class="group-title" style="background: #f4f4f4;"><text class="pl20">{{ letter }}</text></view>
			  <view 
				v-for="city in group" 
				:key="city.id" 
				class="city-item bbo"
				@click="selectCity(city)"
			  >
			    <view class="disfr-lr" style="width: 100%;">
				   <text class="name">{{ city.name }}</text>
				   <u-icon v-if="selectedCity.name == city.name" name="duihao" custom-prefix="qxl-icon" style="position: relative;right:40rpx" size="40"></u-icon>
				</view>
			  </view>
			</view>
		  </scroll-view>
		  
		  <view 
			class="letter-nav" 
			@touchstart="onTouchStart"
			@touchmove.prevent="onTouchMove"
			@touchend="onTouchEnd"
		  >
			<view 
			  v-for="letter in letters" 
			  :key="letter" 
			  class="letter-item"
			  :class="{ active: currentLetter === letter }"
			  @click="scrollToLetter(letter)"
			>
			  {{ letter }}
			</view>
		  </view>
		  
		  <!--<view class="letter-tip" :class="{ show: showLetterTip }">
			{{ tipLetter }}
		  </view>-->
		</view>
		
		<!--<view class="footer">
		  <view class="disfr-lr">
			  <view class="pl10"><text>已选择: {{ $vuex.state.globalData.businessCity.name ? $vuex.state.globalData.businessCity.name : '请选择城市' }}</text></view>
			  <view v-if="$vuex.state.globalData.businessCity.name" @click="deselect" class="pr20" style="color:#f60">取消选择</view>
		  </view>	
		</view>-->
	  </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { onReady,onLoad } from '@dcloudio/uni-app';
/**
 * city-index.json 格式
 * city.list={"A":[{"id":1,"name":"安庆"},{"id":2,"name":"安顺"}],"B":[{"id":3,"name":"北京"}]};
 */
import city from '@/utils/city-index.json';
// 城市数据
const cityData = reactive(city.list);

const letters = ref(Object.keys(cityData).sort());
const currentLetter = ref('');
const tipLetter = ref('');
const showLetterTip = ref(false);
const searchQuery = ref('');
const selectedCity = ref('');
const scrollIntoId = ref('');
const groupPositions = ref({});
const isDrift=ref(false);
onLoad((options)=>{
	uni.$vuex.state.globalData.businessCity={};
	isDrift.value=options.drift ? true : false;
});
//确认选择
const confirmSelect=()=>{
	uni.navigateBack({data:1});
};
//取消选择
const deselect=()=>{
	selectedCity.value='';
	uni.$vuex.state.globalData.businessCity={};
};
// 过滤后的城市数据
const filteredCityData = computed(() => {
  if (!searchQuery.value) return cityData;
  
  const result = {};
  const query = searchQuery.value.toLowerCase();
  
  for (const letter of Object.keys(cityData)) {
    const filteredCities = cityData[letter].filter(city => 
      city.name.toLowerCase().includes(query)
    );
    
    if (filteredCities.length > 0) {
      result[letter] = filteredCities;
    }
  }
  
  return result;
});

// 选择城市
const selectCity = (city) => {
  selectedCity.value = city ? city : {name:'全国'};
  uni.$vuex.state.globalData.businessCity=city;
};

// 滚动到指定字母区域
const scrollToLetter = (letter) => {
  currentLetter.value = letter;
  tipLetter.value = letter;
  showLetterTip.value = true;
  scrollIntoId.value = `group-${letter}`;
  setTimeout(() => {
    showLetterTip.value = false;
  }, 500);
};

// 处理触摸事件
const onTouchStart = (e) => {
  handleTouch(e);
};

const onTouchMove = (e) => {
  handleTouch(e);
};

const onTouchEnd = () => {
  setTimeout(() => {
    showLetterTip.value = false;
  }, 500);
};

const handleTouch = (e) => {
  const query = uni.createSelectorQuery();
  query.select('.letter-nav').boundingClientRect(data => {
    if (!data) return;
    
    const touch = e.touches[0];
    const offsetY = touch.clientY - data.top;
    const index = Math.floor(offsetY / (data.height / letters.value.length));
    
    if (index >= 0 && index < letters.value.length) {
      const letter = letters.value[index];
      if (letter !== currentLetter.value) {
        scrollToLetter(letter);
      }
    }
  }).exec();
};

// 监听滚动事件更新当前字母
const onScroll = (e) => {
  const scrollTop = e.detail.scrollTop;
  for (const letter of letters.value) {
    if (groupPositions.value[letter] <= scrollTop + 100) {
      currentLetter.value = letter;
    }
  }
};

// 页面就绪后计算各字母组位置
onReady(() => {
  const query = uni.createSelectorQuery();
  
  letters.value.forEach(letter => {
    query.select(`#group-${letter}`).boundingClientRect(data => {
      if (data) {
        groupPositions.value[letter] = data.top;
      }
    });
  });
  
  query.exec();
});
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.search-box {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  padding: 10px 20px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  
  .search-input {
    background: transparent;
    border: none;
    color: white;
    font-size: 16px;
    flex: 1;
    padding: 5px 10px;
    outline: none;
  }
  .placeholder {
    color: rgba(255, 255, 255, 0.7);
  }
}

.current-city {
  padding: 20px;
  background: #e3ebf7;
  border-bottom: 1px solid #d0ddec;
  
  .label {
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 8px;
    display: block;
  }
  
  .name {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    display: block;
  }
}

.content {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

.city-list {
  flex: 1;
  height: 100%;
}

.city-group {
 
}

.group-title {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
  padding: 8px 0;
  position: sticky;
  top: 0;
  left:20rpx;
  z-index: 1;
}

.city-item {
  padding: 14px 15px;
  background: white;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.city-item .name {
  font-size: 16px;
  font-weight: 500;
  color: #34495e;
  flex: 1;
}

.city-item .hot {
  background: #ff6b6b;
  color: white;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 10px;
  margin-left: 10px;
}

.letter-nav {
  width: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  /*background: rgba(255, 255, 255, 0.7);
  border-left: 1px solid #eee;*/
  position: absolute;
  right: 20rpx;
  top: 0;
  bottom: 0;
  z-index: 10;
}

.letter-item {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: #333333;
  margin: 2px 0;
  flex-shrink: 0;
}

.letter-item.active {
	/*color: #4b6cb7;*/
  background: #4b6cb7;
  color: white;
  border-radius: 50%;
}

.letter-tip {
  position: absolute;
  width: 80px;
  height: 80px;
  background: rgba(75, 108, 183, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: bold;
  color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.letter-tip.show {
  opacity: 1;
}

.footer {
  padding: 10px;
  text-align: center;
  font-size: 14px;
  color: #7f8c8d;
  border-top: 1px solid #eaeff5;
}
</style>